<template>
  <div class="app-container">
    <el-form inline >
      <el-form-item>
        <el-input
          v-model="input"
          placeholder="请输入角色名称"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-left:10px" >
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">清空</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary">添加</el-button>
    <el-button type="danger" >批量删除</el-button>


      <el-table
      ref="singleTable"
      :data="roles"
      highlight-current-row
      @selection-change="handleSelectionChange"
      style="width: 100%; margin-top: 20px"
      border
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column  label="角色名称">
          <template slot-scope="{row}">
              <template v-if="row.edit">
                  <el-input v-model="row.roleName" style="width:500px"></el-input>
                  <el-button type="danger" @click="editremove(row)" style="margin-left:20px" icon="el-icon-refresh" size="mini">取消</el-button>
              </template>
              <span v-else>{{row.roleName}}</span>
          </template>
       </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="{row}">
          <el-button
            type="info"
            icon="el-icon-user-solid"
            size="mini"
          
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
           @click="changerole(row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
          
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="limit"
      layout="prev, pager, next, jumper"
      :total="20"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Role",
  data() {
    return {
      page:1,
      limit:4,
      roles:[],
      input: "",
    };
  },
  methods:{
    editremove(role){
      role.roleName =  role.roleName2
      role.edit = false
      this.$message.warning('取消角色修改')
    },
    changerole(row){
      row.edit = true
        console.log(row)
    },
   async getRole(){
      let result = await this.$api.role.pageRole(this.page,this.limit)
        if(result.code == 20000){
           this.roles = result.data.items
           this.roles = this.roles.map(item=>{
             item.edit  = false
             item.roleName2  = item.roleName
             return item
           })
        }
    },
    handleCurrentChange(){
      this.getRole()
    },
    handleSelectionChange(){

    }
  },
  mounted(){
    this.getRole()
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>